<script type="text/javascript">
// Submit through jquery because we want the the automatic html5 validation
// and after this send the data to the server by ajax
$("#login").submit(function() {
	$("#hiddenLogin").click();
	return false;
});

$("#signup").submit(function() {
	$("#hiddenSignup").click();
	return false;
});
</script>

<div id="authentication">
	<div id="Login" class="authenticationSection">
	    <form id="login" name="login" method="post" accept-charset="utf-8">
		    <input id="l_userName" placeholder="user name" name="userName" data-bind="value: l_userName" type="text" required="required" />
		    <input id="l_password" placeholder="Password" name="password" data-bind="value: l_password" type="password" required="required" />
			<div>
				<input type="submit" class="actionButton" value="Login" >
			</div>
		    <div class="authenticationFalied">
		        <span data-bind="visible: loginFailed()">Failed to login</span>
		    </div>
        	<input id="hiddenLogin" type="hidden" data-bind="click: submitLoginClick" />
		</form>
	</div>
	<div id="signUp" class="authenticationSection">
	    <form id="signup" name="register" method="post" accept-charset="utf-8">
			<div>
				<input type="text" id="firstName" placeholder="First Name" data-bind="value: firstName" required="required">
				<input type="text" id="lastName" placeholder="Last Name" data-bind="value: lastName" required="required">
			</div>
			<div>
				<input type="text" id="s_userName" placeholder="User Name" data-bind="value: s_userName" required="required">
		    	<input type="password" id="s_password" placeholder="New Password" data-bind="value: s_password" required="required">
		    </div>
		    <div>
		    	<input type="email" id="email" placeholder="Email" data-bind="value: email" required="required">
		    	<input type="tel" id="phone" placeholder="Phone" data-bind="value: phone" required="required">
		    </div>
		    <div>
		    	<input type="text" id="address" placeholder="Address" data-bind="value: address" required="required">
		    </div>
		    <div class="authenticationFalied">
		        <span data-bind="visible: signupFailed()">Failed to sign up</span>
		    </div>
		    <input type="submit" class="actionButton" value="Sign Up">
		    <input id="hiddenSignup" type="hidden" data-bind="click: submitSignupClick" />
	    </form>
	  </div>
</div>


